<template name="editar">
    <h2>Editar grupo</h2>
    <form method="post" action="{{editar_grupo}}" onsubmit="return serializeGroup();">
        <input type="hidden" name="id" style="width: 200px" value="{{['grupo']['idgrupo']}}" />
        <table style="width: 100%">
            <tr>
                <th colspan="2">
                    Nombre
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" name="grupo[nombre]" style="width: 100%" value="{{['grupo']['nombre']}}" />
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    Veh&iacute;culos del grupo
                </th>
            </tr>
            <tr>
                <td>
                    <ul id="vehiculos_por_grupo" class="connectedSortable">
                        <template name="vehiculos_por_grupo"><li class="ui-state-default" id="{{idvehiculo}}">{{nombre}}</li></template>
                    </ul>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    Veh&iacute;culos del sistema
                </th>
            </tr>
            <tr>
                <td>
                    <ul id="vehiculos_del_sistema" class="connectedSortable">
                        <template name="vehiculos_del_sistema"><li class="ui-state-default" id="{{idvehiculo}}">{{nombre}}</li></template>
                    </ul>
                </td>
            </tr>
        </table>
        <br/>
        <small>Nota: Para insertar/borrar veh&iacute;culos de un grupo, haga click en alguno de ellos y sin soltar arr&aacute;strelo hacia la lista correspondiente.</small>
        <br/>
        <br/>
        <input type="submit" value="Guardar cambios" class="make_submit_button" id="submit_button" />
    </form>
    <!-- AUX OUTSIDE FORM TO AVOID POST --><input type="hidden" name="grupo[vehiculos][]" id="vehiculos_por_grupo_input" /><!-- /AUX OUTSIDE FORM TO AVOID POST -->
    <script type="text/javascript">
    $(function() {
        $( "#vehiculos_por_grupo, #vehiculos_del_sistema" ).sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
    function serializeGroup()
    {
        var vehiculos = $('#vehiculos_por_grupo').sortable('toArray');
        $(vehiculos).each(function(){
            var aux = $('#vehiculos_por_grupo_input').clone(true);
            aux.val(this);
            aux.removeAttr('id');
            $('#submit_button').after(aux);
        });
        return true;
    }
    </script>
</template>